<template>
  <div class="login-page">
    <!-- <div class="lg-header">
      <img src="@/assets/images/reg_bg.png" class="lgh-img">
    </div> -->
    <div class="tab-wrap">
      <!-- <div class="tab-nav">
        <div class="tn-item" :class="[{'active': tabIdx == 1}]" @click="tabIdx = 1">联通卡快速通道</div>
        <div class="tn-item" :class="[{'active': tabIdx == 2}]" @click="tabIdx = 2">手机快速通道</div>
      </div> -->
      <div class="tab-cont">
        <div class="lg-form woo-wrap" v-if="tabIdx == 1">
          <div class="woo-card" @click="applyWooCard">
            <img src="@/assets/images/reg_woocard.png" class="woo-img">
          </div>
          <div class="woo-tip-title">人生成功的重要选择，中国联通为您加油助力！</div>
        </div>
        <div class="lg-form reg-form" v-if="tabIdx == 2">
          <div class="lg-group">
            <i class="iconfont icon-shouji i-shouji i-tip"></i>
            <input class="lg-ipt lg-phone" placeholder="输入手机号/账号" v-model="login.phone" />
          </div>
          <div class="lg-group">
            <i class="iconfont icon-dunpai i-dunpai i-tip"></i>
            <input class="lg-ipt lg-captcha" type="text" placeholder="输入验证码/密码" v-model="login.captcha" />
            <a href="javascript:;" class="lg-ver" :class="{'disable': smsCode.status}" @click="getVerCode()">{{smsCode.text}}</a>
          </div>
          <div class="lg-group">
            <x-button class="lg-btn" type="default" @click.native="signUp()">注册 / 登录</x-button>
          </div>
        </div>
      </div>
    </div>
    <div class="lg-bt">
      <p class="lg-footer">路漫漫其修远兮，吾将上下而求索！</p>
    </div>
    <!-- <v-agreement ref="agreement"></v-agreement> -->

    <loading :show="loginLoading"></loading>
    <div class="login-bg"></div>

    <div v-transfer-dom>
      <popup v-model="showApplyWoo" class="agreement-popup" is-transparent>
        <div class="agreement-wrap reg-wrap">
          <i class="weui-icon-cancel i-cancel" @click="closeApplyWoo"></i>
          <div class="reg-title">手机验证</div>
          <div class="lg-form reg-form">
            <div class="lg-group">
              <i class="iconfont icon-shouji i-shouji i-tip"></i>
              <input class="lg-ipt lg-phone" type="tel" placeholder="输入手机号" v-model="login.phone" />
            </div>
            <div class="lg-group">
              <i class="iconfont icon-dunpai i-dunpai i-tip"></i>
              <input class="lg-ipt lg-captcha" type="tel" placeholder="输入验证码" v-model="login.captcha" />
              <a href="javascript:;" class="lg-ver" :class="{'disable': smsCode.status}" @click="getVerCode()">{{smsCode.text}}</a>
            </div>
            <div class="lg-group">
              <x-button class="lg-btn" type="default" @click.native="applyWoo">确定</x-button>
            </div>
          </div>
          <!-- <div class="btn-next-group">
            <a href="javascrip:;" class="btn-next" @click="onAgreementClick()">确定</a>
          </div> -->
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import Api from '@/api/index.js'
import Utils from '@/common/utils.js'
import { TransferDom, Popup, Loading, XButton } from 'vux'
import { setTimeout } from 'timers';
// import vAgreement from '@/components/agreement'
export default {
  directives: {
    TransferDom
  },
  components: {
    Popup,
    Loading,
    XButton
    // vAgreement
  },
  data() {
    return {
      loginLoading: false,
      login: {
        phone: '',
        captcha: ''
      },
      smsCode: {
        text: '获取验证码',
        status: 0
      },
      tabIdx: 2,
      showApplyWoo: false
    }
  },
  methods: {
    // 注册
    signUp() {
      let that = this
      let reg = /[a-zA-Z]/i
      // reg.test(that.login.phone)
      // 有字母不判读是账号
      if (reg.test(that.login.phone)) {
        // 验证其他信息
        if (!that.login.phone || !that.login.captcha) {
          that.$vux.toast.show({
            text: '账号或密码不能为空',
            type: 'text',
            width: '80%'
          })
          return
        }
        // 注册请求开始
        let _account = {
          account: this.login.phone,
          password: this.login.captcha
        }
        Api.accountSignin(_account).then(res => {
          if (res.code === 20000) {
            // 保存用户信息
            Utils.local('userData', res.data)
            Utils.local('accesstoken', res.data.accesstoken)
            if (res.data.examType === 0) {
              // 之前未注册
              that.$router.push({ name: 'mineUserInfo' })
            } else {
              // 已注册用户
              that.$router.push({ name: 'home' })
            }
          } else {
            that.$vux.toast.show({
              text: res.message,
              type: 'text',
              width: '80%'
            })
          }
        })
      } else {
        if ((/^1[3456789]\d{9}$/.test(that.login.phone))) {
          // 验证其他信息
          if (!that.login.phone || !that.login.captcha) {
            that.$vux.toast.show({
              text: '手机号或验证码不能为空',
              type: 'text',
              width: '80%'
            })
            return
          }
          // 注册请求开始
          Api.signin(that.login).then(res => {
            if (res.code === 20000) {
              // if (!Utils.local('loginCount')) {
              //   this.$vux.alert.show({
              //     title: '',
              //     content: '各位同学好：金榜题名平台数据已经更新为2019年浙江高考最新招生计划数据，同步于省考试院发布的招生计划，一段普通平行类考生志愿填报查询已经就绪！请各位VIP用户确认高考成绩后在金榜题名个人中心里填写正确的各科成绩和位次号并保存后即可使用！各位体验用户可以开通vip以获得对应功能。VIP用户在系统里2次修改成绩和位次的机会（包含第一次）。我们将竭诚为大家提供服务谢谢！',
              //     buttonText: '好的，我知道了'
              //   })
              // }
              // 保存用户信息
              if (res.data.isValid == 0) {
                Api.checkValidUser().then(res => { });
              }
              Utils.local('userData', res.data)
              Utils.local('loginCount', 1)
              Utils.local('accesstoken', res.data.accesstoken);
              if (!res.data.name) {
                // 之前未注册
                that.$router.push({ name: 'mineUserInfo' })
              } else {
                Api.checkNingBoUser().then(check => {
                  if (check.code == 20000) {
                    if (check.message == 0) {
                      this.$vux.alert.show({
                        content: `您的手机号码非联通号码，需购买vip套餐`,
                        buttonText: '确定',
                        maskZIndex: 100,
                        onHide() {
                          that.$router.push({ name: 'goodsPay' });
                        }
                      })
                    } else {
                      // 已注册用户
                      that.$router.push({ name: 'home' })
                    }
                  }
                });
              }

            } else {
              that.$vux.toast.show({
                text: res.message,
                type: 'text',
                width: '80%'
              })
            }
          })
        } else {
          that.$vux.toast.show({
            text: '手机号码不正确',
            type: 'text',
            width: '80%'
          })
        }
      }
    },
    // 获取验证码
    getVerCode() {
      if (this.smsCode.status) {
        return
      }
      // 验证手机
      let _phone = this.login.phone
      if (!_phone || _phone.length !== 11) {
        this.$vux.toast.show({
          text: '请输入正确的手机号码',
          type: 'text',
          width: '80%'
        })
        return
      }

      let countDown = 30
      this.smsCode.text = '正在发送(' + countDown + ')'
      this.smsCode.status = 1
      // 倒计时&改变文字和状态
      var sInterval = setInterval(() => {
        countDown--
        if (countDown > 0) {
          this.smsCode.text = '正在发送(' + countDown + ')'
        } else {
          clearInterval(sInterval)
          this.smsCode.text = '获取验证码'
          this.smsCode.status = 0
        }
      }, 1000)
      // 发送验证码
      Api.getCaptcha({ phone: _phone, type: 100 }).then(res => {
        console.log(res)
      })
    },
    // 打开申请协议
    openAgreement() {
      // this.$refs.agreement.openAgreement()
    },
    // 显示申请沃卡
    applyWooCard() {
      this.showApplyWoo = true
    },
    // 关闭申请沃卡
    closeApplyWoo() {
      this.showApplyWoo = false
      this.login.phone = null
      this.login.captcha = null
    },
    // 申请沃卡
    applyWoo() {
      let that = this
      if ((/^1[34578]\d{9}$/.test(that.login.phone))) {
        // 验证其他信息
        if (!that.login.phone || !that.login.captcha) {
          that.$vux.toast.show({
            text: '手机号或验证码不能为空',
            type: 'text',
            width: '80%'
          })
          return
        }
        // 注册请求开始
        Api.signin(that.login).then(res => {
          if (res.code === 20000) {
            // 保存用户信息
            Utils.local('userData', res.data)
            Utils.local('accesstoken', res.data.accesstoken)
            if (res.data.name) {
              // 已注册用户
              // Utils.session('userType', '3')
              that.$router.push({ name: 'mineUserInfo', query: { n: 'goodsPay', lg: true } })
              // that.$router.push({name: 'home'})
            } else {
              // 之前未注册
              // Utils.session('userType', '3')
              that.$router.push({ name: 'mineUserInfo', query: { n: 'goodsPay', lg: true } })
            }
          } else {
            that.$vux.toast.show({
              text: res.message,
              type: 'text',
              width: '80%'
            })
          }
        })
      } else {
        that.$vux.toast.show({
          text: '手机号码不正确',
          type: 'text',
          width: '80%'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  background-color: #ffba6f;
  min-height: 100%;
  background-image: url("../../assets/images/reg_bg.jpg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.txt-right {
  text-align: right;
}
// .lg-header{
//   margin: 0 auto .266667rem /* 10/37.5 */;
//   position: absolute;
//   .lgh-img{
//     width: 100%;
//   }
// }
.lg-form {
  background-color: #fff;
  margin: 0 auto;
  padding: 0.4rem /* 15/37.5 */;
  border-radius: 0.133333rem;
  padding-top: 0.266667rem /* 10/37.5 */;
  // border-bottom-left-radius: 0.133333rem /* 5/37.5 */;
  // border-bottom-right-radius: 0.133333rem /* 5/37.5 */;
  &.reg-form {
    padding-top: 0.666667rem /* 25/37.5 */;
  }
  .lg-title {
    font-size: 15px;
    color: #333;
    margin-bottom: 0.266667rem /* 10/37.5 */;
  }
  .woo-card {
    width: 8rem /* 300/37.5 */;
    background-color: #ffffff;
    overflow: hidden;
    margin: 0.48rem /* 18/37.5 */ auto 0.4rem /* 15/37.5 */;
    .woo-img {
      width: 100%;
    }
  }
  .woo-tip-title {
    font-size: 14px;
    color: #eb8718;
    font-weight: 600;
    margin-bottom: 0.213333rem /* 8/37.5 */;
    text-align: center;
  }
  .woo-tip {
    color: #eb8718;
    font-size: 13px;
    margin-bottom: 0.133333rem /* 5/37.5 */;
  }
  .lg-group {
    position: relative;
    margin-bottom: 0.4rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .lg-ipt {
    width: 100%;
    height: 1.12rem;
    border: 1px solid #ff8600;
    border-radius: 0.533333rem;
    font-size: 15px;
    color: #333;
    padding: 0 0.96rem;
  }
  .lg-phone {
    padding-right: 0;
  }
  .lg-captcha {
    padding-right: 2.8rem;
  }
  .i-tip {
    position: absolute;
    left: 0.32rem;
    top: 0.24rem;
    font-size: 20px;
    color: #999;
  }
  .lg-ver {
    position: absolute;
    padding: 0 0.32rem;
    background-color: #ff8600;
    color: #fff;
    border-radius: 0.533333rem;
    top: 0.106667rem;
    right: 0.106667rem;
    height: 0.906667rem;
    line-height: 0.906667rem;
    font-size: 14px;
    z-index: 10;
    &.disable {
      background-color: #ddd;
    }
  }
  .lg-btn {
    width: 100%;
    background-color: #ff8600;
    border-radius: 40px;
    color: #fff;
    margin-bottom: 0.266667rem /* 10/37.5 */;
  }
}
.woo-wrap {
  margin-bottom: 0.72rem /* 27/37.5 */;
}
.lg-bt {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0.266667rem /* 10/37.5 */;
  left: 0;
  .lg-footer {
    font-size: 14px;
    text-align: center;
    color: #ad6515;
  }
}
.tab-wrap {
  width: 8.746667rem /* 328/37.5 */;
  margin: 0 auto;
  padding-top: 6.4rem /* 240/37.5 */;
  position: relative;
  z-index: 99;
  .tab-nav {
    display: flex;
    height: 1.386667rem /* 52/37.5 */;
    position: relative;
    .tn-item {
      display: block;
      flex: 1;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-size: 100% 1px;
      font-size: 16px;
      text-align: center;
      line-height: 1.386667rem /* 52/37.5 */;
      color: #eb8718;
      background-color: #e9692f;
      position: relative;
      &.active {
        background-color: #fff;
        border-radius: 0 !important;
        &:after {
          content: "";
          width: 100%;
          height: 0.14rem /* 5/37.5 */;
          background-color: #fff;
          position: absolute;
          top: -0.122222rem;
          left: 0;
        }
        &:nth-child(1):after {
          border-top-left-radius: 0.133333rem /* 5/37.5 */;
        }
        &:nth-child(2):after {
          border-top-right-radius: 0.133333rem /* 5/37.5 */;
        }
      }
      &:nth-child(1) {
        border-top-left-radius: 0.133333rem /* 5/37.5 */;
      }
      &:nth-child(2) {
        border-top-right-radius: 0.133333rem /* 5/37.5 */;
      }
    }
  }
}
.tab-bg {
  width: 100%;
  height: 5.466667rem /* 205/37.5 */;
}
.reg-wrap {
  height: initial;
  position: relative;
  .i-cancel {
    position: absolute;
    right: 0.16rem /* 6/37.5 */;
    top: 0.266667rem /* 10/37.5 */;
    font-size: 0.693333rem /* 26/37.5 */;
  }
  .reg-title {
    font-size: 16px;
    color: #ff8600;
    text-align: center;
  }
}
</style>

